<template>
  <div class="main">
    <el-dialog
    title="学校信息"
    top="3vh"
    :visible.sync="sVisible"
    width="38%">
    <div style="padding:0 38px;font-size:18px" v-if="moreInfo.length>0">
      <div style="margin-top:8px;border-bottom:1px solid blue">校名：{{moreInfo[0].sUser}}<el-button style="padding:0;background:red;font-size:15px;border:1px solid yellow;color:yellow" type="primary" size="mini" disabled>{{moreInfo[0].e_status==2? '已认证':'未认证'}}</el-button></div>
      <div style="margin-top:8px;border-bottom:1px solid blue">联系电话：{{moreInfo[0].phone}}</div>
      <div style="margin-top:8px;border-bottom:1px solid blue">电子邮箱：{{moreInfo[0].email}}</div>
      <div style="margin-top:8px;border-bottom:1px solid blue">地址：{{moreInfo[0].address}}</div>
      <div style="margin-top:8px;border-bottom:1px solid blue">学校简介：{{moreInfo[0].introd}}</div>
    </div>
    <!-- 评价 -->
    <div style="padding:0 38px;text-align:center;cursor:pointer" v-show="isCommnet1" @click="oppenComment">查看评价</div>
    <div style="padding:0 38px;text-align:center;cursor:pointer" v-show="isCommnet2" @click="closeComment">收起评价</div>
    <div v-if="showCommnet">
      <div style="padding:3px;border:1px dotted red;margin-bottom:3px;border-radius:2px" v-for="(item,index) in commnetArr" :key="index+'info'">
        <div style="display:flex;justify-content:start">
          <div style="color:skyblue">{{item.tUser}}</div>
          <div>：{{item.comment}}</div>
        </div>
        <div><el-rate disabled :value="item.level"></el-rate></div>
      </div>
    </div>
    </el-dialog>
    <el-dialog
     title="活动信息"
     top='5vh'
     :visible.sync="dialogVisible"
     width="58%"
     :before-close="handleClose">
     <div class="details" style="padding-bottom:38px">
      <!-- <h1>{{this.detailsInfo.item_tit}}</h1> -->
      <div class="detail-l">
        <div class="imgDiv"><img :src="evUrl+this.detailsInfo.item_pic" alt="暂无图片"/></div>
      </div>
      <div class="detail-r">
        <h1>{{this.detailsInfo.item_tit}}</h1>
        <ul class="iteminfo" style="font-size:18px">
          <li>岗位名称：{{this.detailsInfo.station}}</li>
          <li>学校：{{this.detailsInfo.s_realName}}<el-button @click="showSchool(detailsInfo)" style="padding:2px;font-size:15px;border:1px solid yellow;color:yellow" type="primary" size="mini">详细信息</el-button></li>
          <li>联系人：{{this.detailsInfo.contacts}}</li>
          <li>联系电话：{{this.detailsInfo.phone}}</li>
          <li>招聘人数：{{this.detailsInfo.num}}</li>
          <li>类型：{{this.detailsInfo.item_type}}</li>
          <li>服务年限：{{this.detailsInfo.service_time}}</li>
          <li>报名开始时间：{{this.detailsInfo.startTime}}</li>
          <li>报名结束时间：{{this.detailsInfo.endTime}}</li>
          <li>地址：{{this.detailsInfo.addr}}</li>
          <li>描述：{{this.detailsInfo.item_describe}}</li>
        </ul>
          <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </div>
     </div>
  <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span> -->
    </el-dialog>
    <div style="height:38px">
      <div style="position:fixed;width:100%">
        <div class="header" style="background:#ffe6b5;height:38px">
      <div class="header-l">
        <el-select v-model="upInfo.selectInfo" placeholder="类型"
        @change="changeSelect">
        <el-option label="所有" value=""></el-option>
        <el-option v-for="item in type" :key="item" :label="item" :value="item"></el-option>
        <!-- <el-option label="区域二" value="beijing"></el-option> -->
       </el-select>
    </div>
    <div class="header-r">
    <el-input style="height:35px;width:238px" prefix-icon="el-icon-search" v-model="upInfo.searchInfo" placeholder="输入活动名称或岗位名称"></el-input>
    <div><el-button type="primary" size="mini" icon="el-icon-search" style="height:35px;margin-left:5px;border:1px solid #fff" @click="searcherBtu">搜索</el-button></div>
    </div>
    </div>
      </div>
    </div>
    <div class="scroll-a" style="overflow:auto;height:538px">
      <el-card class="box-card" body-style="padding:7px;background-image:src('../assets/small-background.png');" v-for="item in activityList" :key="item.itemId">
          <div class="my-image"><img :src="evUrl+item.item_pic"/></div>
          <div class="my-body">
            <h4 style="color:purple;font-style:italic">{{item.item_tit}}</h4>
            <p style="color:yellow">{{item.item_describe}}</p>
          </div>
          <div class="my_footer">
            <div class="footer-left">
              <h5 style="color:purple;font-style:italic">{{item.item_tit}}</h5>
              <h5 style="color:orange">{{item.item_type}}</h5>
            </div>
            <div class="footer-right">
              <!-- <template slot-scope="scope"> -->
                <el-button style="padding:0 12px;border:1px solid #fff" type="info" size="mini" @click="details(item)">详情</el-button>
                <el-button style="padding:0 12px;border:1px solid #fff" size="mini" type="primary" @click="sign(item)">报名</el-button>
              <!-- </template> -->
              </div>
          </div>
      </el-card>
  </div>
  <div class="footer" style="position:fixed;right:0;bottom:0">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  </div>

</template>

<script>
import { teacherGetPub, enterActivity, addUser, editUser, delUser } from '../api/record'
import { getSchoolMoreInfo } from '../api/info'
export default {
  data () {
    return {
      // 总数
      total: 0,
      // 当前页
      currentPage: 1,
      // 显示评价
      showCommnet: false,
      // 学校详情
      sVisible: false,
      // 详情值
      moreInfo: [],
      // 是否有评价
      isCommnet1: false,
      isCommnet2: false,
      // 评价列表
      commnetArr: [],
      evUrl: this.$evUrl,
      dialogVisible: false,
      loading: false,
      ativity: {
        name: '1'
      },
      activityList: [],
      detailsInfo: {},
      formInfo: {
        selectInfo: '',
        searchInfo: ''
      },
      type: [],
      upInfo: {
        selectInfo: '',
        searchInfo: ''
      }
      // searchInfoVal: ''
    }
  },
  methods: {
    // 获取下一页
    handleCurrentChange (val) {
      this.currentPage = val
      this.getActivity()
    },
    // 查看评价
    oppenComment () {
      this.showCommnet = true
      this.isCommnet2 = true
      this.isCommnet1 = false
    },
    // 收起评价
    closeComment () {
      this.showCommnet = false
      this.isCommnet1 = true
      this.isCommnet2 = false
    },
    // 学校详情
    showSchool (row) {
      this.sVisible = true
      getSchoolMoreInfo({ mySid: row.s_id }).then(({ data }) => {
        // console.log(data)
        this.moreInfo = data
        this.commnetArr = data.filter(item => {
          return item.comment
        })
        // console.log(this.commnetArr)
        if (this.commnetArr.length > 0) {
          this.isCommnet1 = true
          this.isCommnet2 = false
          this.showCommnet = false
        }
      })
      // console.log(row.s_id)
    },
    getActivity () {
      const day = new Date()
      teacherGetPub({ params: { ...this.upInfo, nowTime: this.$moment.utc(day).format('YYYY-MM-DD hh:mm:ss'), currentPage: this.currentPage } }).then(({ data }) => {
        // console.log(data)
        this.activityList = data.result
        this.total = data.total
        this.getType()
      })
    },
    details (item) {
      // console.log(item)
      this.detailsInfo = item
      this.dialogVisible = true
    },
    handleClose () {
      this.isCommnet1 = false
      this.isCommnet2 = false
      this.dialogVisible = false
    },
    getType () {
      // const arr = []
      // console.log('hello')
      // console.log(this.activityList)
      this.activityList.forEach(item => {
        // console.log(item.item_type)
        if (this.type.indexOf(item.item_type) === -1) {
          this.type.push(item.item_type)
        }
      })
      // console.log(this.type)
    },
    changeSelect () {
      this.currentPage = 1
      this.getActivity()
      // console.log(this.upInfo)
    },
    searcherBtu () {
      this.currentPage = 1
      this.getActivity()
    },
    sign (item) {
      if (!window.localStorage.getItem('token')) {
        return this.$message.info('请登录')
      }
      if (JSON.parse(window.localStorage.getItem('userInfo')).role != 1) {
        return this.$message.info('支教活动只能是教师用户才可以报名')
      }
      this.$confirm('参加报名, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

      }).then(() => {
        item.t_name = JSON.parse(window.localStorage.getItem('userInfo')).t_real_name
        item.t_id = JSON.parse(window.localStorage.getItem('userInfo')).t_id
        enterActivity(item).then(({ data }) => {
          if (data.status === 200) {
            this.$message({
              type: 'success',
              message: '报名成功!'
            })
          } else {
            this.$message({
              type: 'info',
              message: data.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消报名'
        })
      })
    }
  },
  mounted () {
    this.getActivity()
  }
}
</script>
<style lang='less' scoped>
  .main{
    .details{
      display: flex;
      height: 400px;
      .detail-l{
        width:30%;
        .imgDiv{
          width: 80%;
          img{
            width: 100%;
          }
        }
      }
      .detail-r{
        width:60%;
        font-size:15px;
        .iteminfo{
          padding: 0;
          li{
            list-style: none;
            padding-left: 20px;
            border-bottom: 1px solid red;
            margin-bottom: 10px;

          }
        }
      }
    }
    .header{
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items:center;
      margin-bottom:5px;
      padding:0 18px;
      // background:gold;
      /deep/.el-input__inner {
         background: transparent;
         border:1px solid #fff;
         color:#fff;
         height:35px;
     }
     /deep/.el-input__inner::placeholder{
      color:#fff;
     }
      .header-l{
        width: 100px;
      }
      .header-r{
        display: flex;
        align-items: center;
        width: 400px;
      }
    }
    .scroll-a{
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      padding:0;
      // text-align: center;
      .el-card ::v-deep .el-card__body{
        // background-image:url('../assets/bg.jpg');;
        background: skyblue;
      }
  .box-card {
    width: 17%;
    box-sizing: border-box;
    height:258px;
    margin-right: 20px;
    margin-bottom: 10px;

    .el-card__body{
      padding:0;
    }
    .my-image{
      height: 130px;
      background:pink;
      margin-bottom:10px;
      img{
        height:100%;
        width: 100%;
      }
    }
    .my-body{
      height:58px;
      // background: gray;
      border-bottom: 1px solid purple;
      h4{
        text-align: center;
        padding: 3px;
      }
      p{
        margin:0;
        padding:0;
      }
    }
    .my_footer{
      display: flex;
      justify-content: space-between;
      padding:3px 0;
      .footer-left{
        h5{
          margin: 4px 0;
              width: 110px; //文字宽度
    overflow: hidden; //超出宽度隐藏
    white-space: nowrap;  //强制文字在一行
    text-overflow: ellipsis; //文字溢出显示省略号
        }
      }
      .footer-right{
        display:flex;
        width:200px;
        padding-top: 8px;
      }
    }
  }
  }

  }

</style>
